@extends('layouts.admin')

@section('title', 'Edit WhatsApp Campaign')

@section('content')
    <div class="flex items-center justify-between">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Edit WhatsApp Campaign') }}
        </h2>
    </div>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <x-validation-errors class="mb-4" />
                    <form method="POST" action="{{ route('admin.whatsapp-campaigns.update', $campaign) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="space-y-8">
                            <!-- Header -->
                            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                <div>
                                    <h2 class="text-2xl font-bold text-gray-900">Edit WhatsApp Campaign</h2>
                                    <p class="mt-1 text-sm text-gray-500">Update 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 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                                        </svg>
                                        Back to Campaigns
                                    </a>
                                </div>
                            </div>

                            <!-- Form -->
                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200">
                                    <h3 class="text-lg font-semibold text-gray-900">Campaign Details</h3>
                                </div>
                                <div class="p-6 space-y-6">
                                    <!-- Campaign Name -->
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-gray-700">Campaign Name <span class="text-rose-600">*</span></label>
                                        <div class="mt-1">
                                            <input type="text" name="name" id="name" value="{{ old('name', $campaign->name) }}" required class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Flash Sale Announcement">
                                        </div>
                                        @error('name')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200">
                                    <h3 class="text-lg font-semibold text-gray-900">Message Content</h3>
                                </div>
                                <div class="p-6 space-y-6">
                                    <!-- Message Content -->
                                    <div>
                                        <label for="message" class="block text-sm font-medium text-gray-700">Message <span class="text-rose-600">*</span></label>
                                        <div class="mt-1">
                                            <textarea id="message" name="message" rows="5" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Enter your WhatsApp message here...">{{ old('message', $campaign->message) }}</textarea>
                                        </div>
                                        <div class="mt-2 flex justify-between items-center">
                                            <p class="text-xs text-gray-500">You can include emojis and formatting</p>
                                            <div class="text-xs text-gray-500">
                                                <span id="character-count">0</span>/1000 characters
                                            </div>
                                        </div>
                                        @error('message')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <!-- Media Attachment -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Media Attachment (Optional)</label>
                                        <div class="space-y-4">
                                            <!-- Media URL -->
                                            <div>
                                                <label for="media_url" class="block text-sm font-medium text-gray-700">Media URL</label>
                                                <div class="mt-1">
                                                    <input type="url" name="media_url" id="media_url" value="{{ old('media_url', $campaign->media_url) }}" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="https://example.com/image.jpg">
                                                </div>
                                                <p class="mt-1 text-xs text-gray-500">Enter a URL to an image, video, or document</p>
                                                @error('media_url')
                                                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                                @enderror
                                            </div>

                                            <!-- Media Type -->
                                            <div>
                                                <label for="media_type" class="block text-sm font-medium text-gray-700">Media Type</label>
                                                <div class="mt-1">
                                                    <select id="media_type" name="media_type" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                                        <option value="" {{ old('media_type', $campaign->media_type) == '' ? 'selected' : '' }}>None</option>
                                                        <option value="image" {{ old('media_type', $campaign->media_type) == 'image' ? 'selected' : '' }}>Image</option>
                                                        <option value="video" {{ old('media_type', $campaign->media_type) == 'video' ? 'selected' : '' }}>Video</option>
                                                        <option value="document" {{ old('media_type', $campaign->media_type) == 'document' ? 'selected' : '' }}>Document</option>
                                                        <option value="audio" {{ old('media_type', $campaign->media_type) == 'audio' ? 'selected' : '' }}>Audio</option>
                                                    </select>
                                                </div>
                                                @error('media_type')
                                                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Add Personalization -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Add Personalization</label>
                                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                                            <button type="button" class="personalization-tag inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tag="{first_name}">
                                                First Name
                                            </button>
                                            <button type="button" class="personalization-tag inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tag="{last_name}">
                                                Last Name
                                            </button>
                                            <button type="button" class="personalization-tag inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tag="{full_name}">
                                                Full Name
                                            </button>
                                            <button type="button" class="personalization-tag inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tag="{company}">
                                                Company
                                            </button>
                                        </div>
                                        <p class="mt-2 text-xs text-gray-500">Click to add personalization tags to your message</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200">
                                    <h3 class="text-lg font-semibold text-gray-900">Recipients</h3>
                                </div>
                                <div class="p-6 space-y-6">
                                    <!-- Recipient Lists -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Recipients <span class="text-rose-600">*</span></label>
                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                            @php
                                                $selectedRecipients = old('recipient_list', $campaign->recipients->pluck('id')->toArray());
                                            @endphp
                                            @foreach($clients as $client)
                                                <div class="relative flex items-start">
                                                    <div class="flex items-center h-5">
                                                        <input id="client_{{ $client->id }}" name="recipient_list[]" type="checkbox" value="{{ $client->id }}" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded" {{ in_array($client->id, $selectedRecipients) ? 'checked' : '' }}>
                                                    </div>
                                                    <div class="ml-3 text-sm">
                                                        <label for="client_{{ $client->id }}" class="font-medium text-gray-700">{{ $client->name }}</label>
                                                        <p class="text-gray-500">{{ $client->phone_number }}</p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        @error('recipient_list')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <!-- Test Number -->
                                    <div>
                                        <label for="test_number" class="block text-sm font-medium text-gray-700">Test WhatsApp Number</label>
                                        <div class="mt-1">
                                            <input type="tel" name="test_number" id="test_number" value="{{ old('test_number') }}" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="+1234567890">
                                        </div>
                                        <p class="mt-1 text-xs text-gray-500">Send a test message to this WhatsApp number before sending to all recipients</p>
                                        @error('test_number')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200">
                                    <h3 class="text-lg font-semibold text-gray-900">Scheduling</h3>
                                </div>
                                <div class="p-6 space-y-6">
                                    <!-- Scheduled At -->
                                    <div>
                                        <label for="scheduled_at" class="block text-sm font-medium text-gray-700">Schedule Date & Time</label>
                                        <div class="mt-1">
                                            <input type="datetime-local" name="scheduled_at" id="scheduled_at" value="{{ old('scheduled_at', $campaign->scheduled_at ? $campaign->scheduled_at->format('Y-m-d\TH:i') : '') }}" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <p class="mt-1 text-xs text-gray-500">Leave empty to save as draft</p>
                                        @error('scheduled_at')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <!-- Status -->
                                    <div>
                                        <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                                        <div class="mt-1">
                                            <select id="status" name="status" class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                                <option value="draft" {{ old('status', $campaign->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                                <option value="scheduled" {{ old('status', $campaign->status) == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                                                @if($campaign->status == 'sending' || $campaign->status == 'sent' || $campaign->status == 'cancelled' || $campaign->status == 'failed')
                                                    <option value="{{ $campaign->status }}" selected>{{ ucfirst($campaign->status) }}</option>
                                                @endif
                                            </select>
                                        </div>
                                        @error('status')
                                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="flex items-center justify-end space-x-3">
                                <a href="{{ route('admin.whatsapp-campaigns.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                    Cancel
                                </a>
                                <button type="submit" name="action" value="save_draft" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md 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">
                                    Save Draft
                                </button>
                                <button type="submit" name="action" value="save_and_schedule" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                    Save & Schedule
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const messageField = document.getElementById('message');
            const characterCount = document.getElementById('character-count');

            // Update character count
            function updateCharacterCount() {
                const count = messageField.value.length;
                characterCount.textContent = count;
            }

            // Initial count
            updateCharacterCount();

            // Update on input
            messageField.addEventListener('input', updateCharacterCount);

            // Personalization tags
            const personalizationTags = document.querySelectorAll('.personalization-tag');
            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.');
                }
            });
        });
    </script>
    @endpush
@endsection