@extends('layouts.admin')

@section('page-title', 'New SMS Campaign')

@section('content')
<div class="py-6">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="mb-6">
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.bulk-sms.index') }}" class="inline-flex items-center justify-center w-9 h-9 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </a>
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 tracking-tight">New SMS Campaign</h2>
                    <p class="text-sm text-gray-500 mt-1">Compose and send bulk SMS to your audience</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Main Form --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Message Card --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
                                <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="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>
                            <h3 class="text-base font-semibold text-gray-900">Message Content</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('admin.bulk-sms.store') }}" method="POST" id="sms-form">
                            @csrf

                            <div class="mb-5">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Target Audience
                                    <span class="text-red-500 ml-0.5">*</span>
                                </label>
                                <select name="target_type" id="target_type" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                                    <option value="">Select audience...</option>
                                    <option value="all">All Users & Subscribers</option>
                                    <option value="customers">Customers Only</option>
                                    <option value="vendors">Vendors Only</option>
                                    <option value="subscribers">Subscribers Only</option>
                                </select>
                            </div>

                            <div class="mb-5">
                                <div class="flex items-center justify-between mb-2">
                                    <label class="block text-sm font-medium text-gray-700">
                                        Message
                                        <span class="text-red-500 ml-0.5">*</span>
                                    </label>
                                    <span id="char-count" class="text-xs text-gray-400">0 / 1000</span>
                                </div>
                                <textarea name="message" id="message-input" rows="6" required maxlength="1000" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors resize-none" placeholder="Type your SMS message here..."></textarea>
                                <div class="flex items-center justify-between mt-2">
                                    <div class="flex items-center gap-2">
                                        <div id="sms-segments" class="text-xs text-gray-400">0 SMS segments</div>
                                        <span class="text-gray-300">|</span>
                                        <span class="text-xs text-gray-400">160 chars per segment</span>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-5">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Sender ID</label>
                                <input type="text" name="sender_id" maxlength="11" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors" placeholder="e.g., YourBrand">
                                <p class="text-xs text-gray-400 mt-1.5">Max 11 characters. Alphanumeric only. Leave blank to use default.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                {{-- Recipient Info --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h3 class="text-sm font-semibold text-gray-900">Audience Overview</h3>
                    </div>
                    <div class="p-5 space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                <span class="text-sm text-gray-600">Subscribers</span>
                            </div>
                            <span class="text-sm font-semibold text-gray-900">{{ number_format($subscriberCount) }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
                                <span class="text-sm text-gray-600">Customers</span>
                            </div>
                            <span class="text-sm font-semibold text-gray-900">{{ number_format(\App\Models\User::role('customer')->count()) }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
                                <span class="text-sm text-gray-600">Vendors</span>
                            </div>
                            <span class="text-sm font-semibold text-gray-900">{{ number_format(\App\Models\User::role('vendor')->count()) }}</span>
                        </div>
                        <div class="border-t border-gray-100 pt-3">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700">Total Reachable</span>
                                <span class="text-base font-bold text-emerald-600">{{ number_format($subscriberCount + \App\Models\User::role('customer')->count() + \App\Models\User::role('vendor')->count()) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Scheduling --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h3 class="text-sm font-semibold text-gray-900">Schedule</h3>
                    </div>
                    <div class="p-5">
                        <div id="sms-form">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Send Date & Time</label>
                            <input type="datetime-local" name="scheduled_at" form="sms-form" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                            <p class="text-xs text-gray-400 mt-2">Leave empty to save as draft</p>
                        </div>
                    </div>
                </div>

                {{-- Quick Tips --}}
                <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl border border-amber-200 p-5">
                    <div class="flex items-start gap-2 mb-3">
                        <svg class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25a3 3 0 00-6 0v5.25m6 0a3 3 0 01-6 0m6 0H9m6.75-10.5H18a2.25 2.25 0 012.25 2.25v9A2.25 2.25 0 0118 16.5h-2.25M6.75 5.25H6a2.25 2.25 0 00-2.25 2.25v9A2.25 2.25 0 006 18.75h.75m11.25-13.5v.75"/></svg>
                        <h4 class="text-sm font-semibold text-amber-800">SMS Best Practices</h4>
                    </div>
                    <ul class="space-y-2 text-xs text-amber-700">
                        <li class="flex items-start gap-1.5">
                            <svg class="w-3.5 h-3.5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Keep messages under 160 characters for single SMS
                        </li>
                        <li class="flex items-start gap-1.5">
                            <svg class="w-3.5 h-3.5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Include clear call-to-action in your message
                        </li>
                        <li class="flex items-start gap-1.5">
                            <svg class="w-3.5 h-3.5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            Avoid ALL CAPS and excessive punctuation!!!
                        </li>
                    </ul>
                </div>

                {{-- Actions --}}
                <div class="flex flex-col gap-3">
                    <button type="submit" form="sms-form" class="w-full inline-flex items-center justify-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="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>
                        Save Campaign
                    </button>
                    <a href="{{ route('admin.bulk-sms.index') }}" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const messageInput = document.getElementById('message-input');
    const charCount = document.getElementById('char-count');
    const smsSegments = document.getElementById('sms-segments');

    messageInput.addEventListener('input', function() {
        const length = this.value.length;
        charCount.textContent = length + ' / 1000';

        const segments = Math.ceil(length / 160) || 0;
        smsSegments.textContent = segments + ' SMS segment' + (segments !== 1 ? 's' : '');

        if (length > 900) {
            charCount.classList.add('text-red-500');
            charCount.classList.remove('text-gray-400');
        } else if (length > 700) {
            charCount.classList.add('text-amber-500');
            charCount.classList.remove('text-gray-400', 'text-red-500');
        } else {
            charCount.classList.remove('text-red-500', 'text-amber-500');
            charCount.classList.add('text-gray-400');
        }
    });
});
</script>
@endpush
@endsection