@extends('layouts.admin')

@section('header', 'SMS Campaign Management')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header section -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Create SMS Campaign</h1>
                <p class="mt-2 text-sm text-gray-500">Design and schedule your SMS marketing campaign</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ route('admin.sms-campaigns.index') }}" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Campaigns
                </a>
            </div>
        </div>

        <!-- Alert Messages -->
        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg relative mb-6" role="alert">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <strong class="font-medium">Please fix the following errors:</strong>
                </div>
                <ul class="mt-2 ml-6 list-disc text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.sms-campaigns.store') }}" class="space-y-8">
            @csrf

            <!-- Campaign Details -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-info-circle text-rose-500 mr-2"></i>
                        Campaign Details
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Campaign Name -->
                    <div>
                        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                            Campaign Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}" required
                               placeholder="e.g., Flash Sale Announcement, Weekly Newsletter"
                               class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                        @error('name')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Sender ID -->
                    <div>
                        <label for="sender_id" class="block text-sm font-semibold text-gray-700 mb-2">
                            Sender ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="sender_id" id="sender_id" value="{{ old('sender_id') }}" required
                               placeholder="e.g., YourBrand (max 11 characters)"
                               maxlength="11"
                               class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500 flex items-center">
                            <i class="fas fa-info-circle mr-1"></i>
                            This name appears as the sender of the SMS (alphanumeric, max 11 characters)
                        </p>
                        @error('sender_id')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Message Content -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-edit text-rose-500 mr-2"></i>
                        Message Content
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Message Text -->
                    <div>
                        <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
                            SMS Message <span class="text-red-500">*</span>
                        </label>
                        <textarea id="message" name="message" rows="5" required
                                  placeholder="Type your SMS message here... Keep it clear and engaging!"
                                  class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm resize-none">{{ old('message') }}</textarea>
                        
                        <div class="mt-2 flex justify-between items-center">
                            <p class="text-xs text-gray-500 flex items-center">
                                <i class="fas fa-info-circle mr-1"></i>
                                Plain text only, no HTML formatting
                            </p>
                            <div class="text-xs text-gray-500 bg-gray-50 px-3 py-1 rounded-full">
                                <span id="character-count" class="font-medium">0</span>/160 characters
                                (<span id="message-count" class="font-medium">1</span> SMS<span id="message-plural" class="hidden">s</span>)
                            </div>
                        </div>
                        @error('message')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Personalization Tags -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">Add Personalization</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <button type="button" class="personalization-tag inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-rose-50 hover:border-rose-300 hover:text-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200" data-tag="{first_name}">
                                <i class="fas fa-user mr-2"></i>
                                First Name
                            </button>
                            <button type="button" class="personalization-tag inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-rose-50 hover:border-rose-300 hover:text-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200" data-tag="{last_name}">
                                <i class="fas fa-user mr-2"></i>
                                Last Name
                            </button>
                            <button type="button" class="personalization-tag inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-rose-50 hover:border-rose-300 hover:text-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200" data-tag="{full_name}">
                                <i class="fas fa-id-card mr-2"></i>
                                Full Name
                            </button>
                            <button type="button" class="personalization-tag inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-rose-50 hover:border-rose-300 hover:text-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200" data-tag="{company}">
                                <i class="fas fa-building mr-2"></i>
                                Company
                            </button>
                        </div>
                        <p class="mt-2 text-xs text-gray-500 flex items-center">
                            <i class="fas fa-lightbulb mr-1"></i>
                            Click any tag to insert it into your message at the cursor position
                        </p>
                    </div>
                </div>
            </div>

            <!-- Recipients -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-users text-rose-500 mr-2"></i>
                        Recipients
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Recipient Lists -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            Select Recipient Lists <span class="text-red-500">*</span>
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($recipientLists as $list)
                                <div class="relative">
                                    <label for="list_{{ $list->id }}" class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                                        <input id="list_{{ $list->id }}" name="recipient_lists[]" type="checkbox" value="{{ $list->id }}" 
                                               class="h-4 w-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500" 
                                               {{ in_array($list->id, old('recipient_lists', [])) ? 'checked' : '' }}>
                                        <div class="ml-3 flex-1">
                                            <div class="text-sm font-medium text-gray-900">{{ $list->name }}</div>
                                            <div class="text-xs text-gray-500 flex items-center mt-1">
                                                <i class="fas fa-users mr-1"></i>
                                                {{ $list->subscribers_count }} contacts
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        @error('recipient_lists')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Test Number -->
                    <div>
                        <label for="test_number" class="block text-sm font-semibold text-gray-700 mb-2">
                            Test Phone Number
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-phone text-gray-400"></i>
                            </div>
                            <input type="tel" name="test_number" id="test_number" value="{{ old('test_number') }}"
                                   placeholder="+1234567890"
                                   class="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                        </div>
                        <p class="mt-1 text-xs text-gray-500 flex items-center">
                            <i class="fas fa-info-circle mr-1"></i>
                            Send a test SMS to this number before sending to all recipients
                        </p>
                        @error('test_number')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Scheduling -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-clock text-rose-500 mr-2"></i>
                        Scheduling Options
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Send Options -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-4">When to send this campaign?</label>
                        <div class="space-y-4">
                            <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                                <input name="send_option" type="radio" value="now" 
                                       class="mt-1 h-4 w-4 text-rose-600 border-gray-300 focus:ring-rose-500" 
                                       {{ old('send_option') == 'now' ? 'checked' : '' }}>
                                <div class="ml-3">
                                    <div class="text-sm font-medium text-gray-900 flex items-center">
                                        <i class="fas fa-bolt text-orange-500 mr-2"></i>
                                        Send immediately
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">The campaign will be sent as soon as you submit this form</div>
                                </div>
                            </label>
                            
                            <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                                <input id="send_later" name="send_option" type="radio" value="later" 
                                       class="mt-1 h-4 w-4 text-rose-600 border-gray-300 focus:ring-rose-500" 
                                       {{ old('send_option') == 'later' ? 'checked' : '' }}>
                                <div class="ml-3">
                                    <div class="text-sm font-medium text-gray-900 flex items-center">
                                        <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
                                        Schedule for later
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">Choose a specific date and time to send this campaign</div>
                                </div>
                            </label>
                            
                            <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                                <input name="send_option" type="radio" value="draft" 
                                       class="mt-1 h-4 w-4 text-rose-600 border-gray-300 focus:ring-rose-500" 
                                       {{ old('send_option', 'draft') == 'draft' ? 'checked' : '' }}>
                                <div class="ml-3">
                                    <div class="text-sm font-medium text-gray-900 flex items-center">
                                        <i class="fas fa-save text-gray-500 mr-2"></i>
                                        Save as draft
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">Save this campaign as a draft to send later</div>
                                </div>
                            </label>
                        </div>
                        @error('send_option')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Schedule Date/Time -->
                    <div id="schedule_datetime_container" class="hidden">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="scheduled_date" class="block text-sm font-semibold text-gray-700 mb-2">Date</label>
                                <div class="relative">
                                    <input type="date" name="scheduled_date" id="scheduled_date" value="{{ old('scheduled_date') }}"
                                           class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <i class="fas fa-calendar text-gray-400"></i>
                                    </div>
                                </div>
                                @error('scheduled_date')
                                    <div class="mt-2 flex items-center text-sm text-red-600">
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div>
                                <label for="scheduled_time" class="block text-sm font-semibold text-gray-700 mb-2">Time</label>
                                <div class="relative">
                                    <input type="time" name="scheduled_time" id="scheduled_time" value="{{ old('scheduled_time') }}"
                                           class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <i class="fas fa-clock text-gray-400"></i>
                                    </div>
                                </div>
                                @error('scheduled_time')
                                    <div class="mt-2 flex items-center text-sm text-red-600">
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Advanced Options -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-cogs text-rose-500 mr-2"></i>
                        Advanced Options
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                            <input name="track_clicks" type="checkbox" value="1" 
                                   class="mt-1 h-4 w-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500" 
                                   {{ old('track_clicks', '1') == '1' ? 'checked' : '' }}>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-900 flex items-center">
                                    <i class="fas fa-mouse-pointer text-blue-500 mr-2"></i>
                                    Track Link Clicks
                                </div>
                                <div class="text-xs text-gray-500 mt-1">Monitor when recipients click links in your SMS</div>
                            </div>
                        </label>
                        
                        <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                            <input name="track_delivery" type="checkbox" value="1" 
                                   class="mt-1 h-4 w-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500" 
                                   {{ old('track_delivery', '1') == '1' ? 'checked' : '' }}>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-900 flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    Track Delivery Status
                                </div>
                                <div class="text-xs text-gray-500 mt-1">Monitor SMS delivery confirmation</div>
                            </div>
                        </label>
                        
                        <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                            <input name="opt_out" type="checkbox" value="1" 
                                   class="mt-1 h-4 w-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500" 
                                   {{ old('opt_out', '1') == '1' ? 'checked' : '' }}>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-900 flex items-center">
                                    <i class="fas fa-sign-out-alt text-orange-500 mr-2"></i>
                                    Include Opt-Out Instructions
                                </div>
                                <div class="text-xs text-gray-500 mt-1">Add "Reply STOP to unsubscribe" to your message</div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4 pt-6 border-t border-gray-200">
                <a href="{{ route('admin.sms-campaigns.index') }}" 
                   class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                    <i class="fas fa-times mr-2"></i>
                    Cancel
                </a>
                <button type="submit" 
                        class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Create Campaign
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sendLaterRadio = document.getElementById('send_later');
            const scheduleDatetimeContainer = document.getElementById('schedule_datetime_container');
            const messageInput = document.getElementById('message');
            const characterCount = document.getElementById('character-count');
            const messageCount = document.getElementById('message-count');
            const messagePlural = document.getElementById('message-plural');
            const personalizationTags = document.querySelectorAll('.personalization-tag');
            
            function toggleScheduleDateTime() {
                if (sendLaterRadio.checked) {
                    scheduleDatetimeContainer.classList.remove('hidden');
                } else {
                    scheduleDatetimeContainer.classList.add('hidden');
                }
            }
            
            function updateCharacterCount() {
                const text = messageInput.value;
                const length = text.length;
                characterCount.textContent = length;
                
                // Calculate number of SMS messages (160 chars for first, 153 for subsequent)
                let messages = 1;
                if (length > 160) {
                    messages = Math.ceil((length - 160) / 153) + 1;
                }
                
                messageCount.textContent = messages;
                if (messages === 1) {
                    messagePlural.classList.add('hidden');
                } else {
                    messagePlural.classList.remove('hidden');
                }
            }
            
            // Initial state
            toggleScheduleDateTime();
            updateCharacterCount();
            
            // Add event listeners
            messageInput.addEventListener('input', updateCharacterCount);
            
            document.querySelectorAll('input[name="send_option"]').forEach(function(radio) {
                radio.addEventListener('change', toggleScheduleDateTime);
            });
            
            // Personalization tags
            personalizationTags.forEach(function(tag) {
                tag.addEventListener('click', function() {
                    const tagText = this.dataset.tag;
                    const cursorPos = messageInput.selectionStart;
                    const textBefore = messageInput.value.substring(0, cursorPos);
                    const textAfter = messageInput.value.substring(cursorPos);
                    
                    messageInput.value = textBefore + tagText + textAfter;
                    messageInput.focus();
                    messageInput.selectionStart = cursorPos + tagText.length;
                    messageInput.selectionEnd = cursorPos + tagText.length;
                    
                    updateCharacterCount();
                });
            });
        });
    </script>
    @endpush
@endsection