@extends('layouts.admin')

@section('header', 'WhatsApp 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 WhatsApp Campaign</h1>
                <p class="mt-2 text-sm text-gray-500">Design and schedule your WhatsApp marketing campaign</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ route('admin.whatsapp-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.whatsapp-campaigns.store') }}" enctype="multipart/form-data" 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="fab fa-whatsapp text-green-500 mr-2"></i>
                        Campaign Details
                    </h3>
                </div>
                <div class="p-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., Product Launch, Special Offer, 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>
                </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-comment-dots 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">
                            WhatsApp Message <span class="text-red-500">*</span>
                        </label>
                        <textarea id="message" name="message" rows="6" required
                                  placeholder="Type your WhatsApp message here... You can use emojis 😊 and formatting *bold* _italic_"
                                  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>
                                Support for emojis and WhatsApp formatting (*bold*, _italic_)
                            </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>/1000 characters
                            </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-green-50 hover:border-green-300 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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-green-50 hover:border-green-300 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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-green-50 hover:border-green-300 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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-green-50 hover:border-green-300 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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>

                    <!-- Media Attachment -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            Media Attachment
                            <span class="text-gray-500 font-normal">(Optional)</span>
                        </label>
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
                            <!-- Media Type -->
                            <div>
                                <label for="media_type" class="block text-sm font-medium text-gray-700 mb-2">Media Type</label>
                                <div class="relative">
                                    <select id="media_type" name="media_type"
                                            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 appearance-none bg-white">
                                        <option value="" {{ old('media_type') == '' ? 'selected' : '' }}>No media</option>
                                        <option value="image" {{ old('media_type') == 'image' ? 'selected' : '' }}>📷 Image</option>
                                        <option value="video" {{ old('media_type') == 'video' ? 'selected' : '' }}>🎥 Video</option>
                                        <option value="document" {{ old('media_type') == 'document' ? 'selected' : '' }}>📄 Document</option>
                                        <option value="audio" {{ old('media_type') == 'audio' ? 'selected' : '' }}>🎵 Audio</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                                @error('media_type')
                                    <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>

                            <!-- Media URL -->
                            <div id="media_url_container" class="{{ old('media_type') ? '' : 'hidden' }}">
                                <label for="media_url" class="block text-sm font-medium text-gray-700 mb-2">Media URL</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-link text-gray-400"></i>
                                    </div>
                                    <input type="url" name="media_url" id="media_url" value="{{ old('media_url') }}"
                                           placeholder="https://example.com/media.jpg"
                                           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>
                                    Enter a direct URL to your image, video, document, or audio file
                                </p>
                                @error('media_url')
                                    <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>

            <!-- 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 Selection -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            Select Recipients <span class="text-red-500">*</span>
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($clients as $client)
                                <div class="relative">
                                    <label for="client_{{ $client->id }}" class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition duration-200">
                                        <input id="client_{{ $client->id }}" name="recipient_list[]" type="checkbox" value="{{ $client->id }}" 
                                               class="h-4 w-4 text-green-600 border-gray-300 rounded focus:ring-green-500" 
                                               {{ in_array($client->id, old('recipient_list', [])) ? 'checked' : '' }}>
                                        <div class="ml-3 flex-1">
                                            <div class="text-sm font-medium text-gray-900">{{ $client->name }}</div>
                                            <div class="text-xs text-gray-500 flex items-center mt-1">
                                                <i class="fab fa-whatsapp mr-1"></i>
                                                {{ $client->phone_number ?? 'No phone number' }}
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        @error('recipient_list')
                            <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 WhatsApp Number
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fab fa-whatsapp text-green-500"></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 message to this WhatsApp 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 & Status
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Schedule Date/Time -->
                        <div>
                            <label for="scheduled_at" class="block text-sm font-semibold text-gray-700 mb-2">
                                Schedule Date & Time
                            </label>
                            <div class="relative">
                                <input type="datetime-local" name="scheduled_at" id="scheduled_at" value="{{ old('scheduled_at') }}"
                                       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>
                            <p class="mt-1 text-xs text-gray-500 flex items-center">
                                <i class="fas fa-info-circle mr-1"></i>
                                Leave empty to save as draft
                            </p>
                            @error('scheduled_at')
                                <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>

                        <!-- Status -->
                        <div>
                            <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Campaign Status</label>
                            <div class="relative">
                                <select id="status" name="status"
                                        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 appearance-none bg-white">
                                    <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>📝 Draft</option>
                                    <option value="scheduled" {{ old('status') == 'scheduled' ? 'selected' : '' }}>⏰ Scheduled</option>
                                    <option value="sending" {{ old('status') == 'sending' ? 'selected' : '' }}>📤 Sending</option>
                                    <option value="sent" {{ old('status') == 'sent' ? 'selected' : '' }}>✅ Sent</option>
                                    <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>❌ Cancelled</option>
                                    <option value="failed" {{ old('status') == 'failed' ? 'selected' : '' }}>⚠️ Failed</option>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400"></i>
                                </div>
                            </div>
                            @error('status')
                                <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>

            <!-- 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.whatsapp-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" name="action" value="save_draft" 
                        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-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-200">
                    <i class="fas fa-save mr-2"></i>
                    Save Draft
                </button>
                <button type="submit" name="action" value="save_and_schedule" 
                        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="fab fa-whatsapp mr-2"></i>
                    Save & Schedule
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const messageField = document.getElementById('message');
            const characterCount = document.getElementById('character-count');
            const mediaTypeSelect = document.getElementById('media_type');
            const mediaUrlContainer = document.getElementById('media_url_container');
            const personalizationTags = document.querySelectorAll('.personalization-tag');

            // Update character count
            function updateCharacterCount() {
                const count = messageField.value.length;
                characterCount.textContent = count;
                
                // Change color based on limit
                if (count > 950) {
                    characterCount.parentElement.classList.add('text-red-600');
                    characterCount.parentElement.classList.remove('text-gray-500');
                } else {
                    characterCount.parentElement.classList.add('text-gray-500');
                    characterCount.parentElement.classList.remove('text-red-600');
                }
            }

            // Show/hide media URL field based on media type selection
            function toggleMediaUrl() {
                if (mediaTypeSelect.value === '') {
                    mediaUrlContainer.classList.add('hidden');
                } else {
                    mediaUrlContainer.classList.remove('hidden');
                }
            }

            // Initial setup
            updateCharacterCount();
            toggleMediaUrl();

            // Event listeners
            messageField.addEventListener('input', updateCharacterCount);
            mediaTypeSelect.addEventListener('change', toggleMediaUrl);

            // Personalization tags
            personalizationTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    const tagValue = this.getAttribute('data-tag');
                    const currentPos = messageField.selectionStart;
                    const text = messageField.value;
                    const beforeText = text.substring(0, currentPos);
                    const afterText = text.substring(currentPos, text.length);
                    
                    messageField.value = beforeText + tagValue + afterText;
                    messageField.focus();
                    messageField.selectionStart = currentPos + tagValue.length;
                    messageField.selectionEnd = currentPos + tagValue.length;
                    
                    updateCharacterCount();
                });
            });

            // Form validation
            const form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                const recipients = document.querySelectorAll('input[name="recipient_list[]"]:checked');
                if (recipients.length === 0) {
                    e.preventDefault();
                    alert('Please select at least one recipient.');
                    return false;
                }

                const message = messageField.value.trim();
                if (message.length === 0) {
                    e.preventDefault();
                    alert('Please enter a message.');
                    messageField.focus();
                    return false;
                }
            });
        });
    </script>
    @endpush
@endsection