@extends('layouts.admin')

@section('header', 'Edit Email Campaign')

@section('content')
<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 Email Campaign</h2>
            <p class="mt-1 text-sm text-gray-500">Update your email marketing campaign</p>
        </div>
        <div class="mt-4 md:mt-0">
            <a href="{{ route('admin.email-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-rose-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 -->
    <form action="{{ route('admin.email-campaigns.update', $campaign->id) }}" method="POST" class="space-y-8">
        @csrf
        @method('PUT')

        <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-red-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-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Summer Sale Newsletter">
                    </div>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Subject Line -->
                <div>
                    <label for="subject" class="block text-sm font-medium text-gray-700">Subject Line <span class="text-red-600">*</span></label>
                    <div class="mt-1">
                        <input type="text" name="subject" id="subject" value="{{ old('subject', $campaign->subject) }}" required class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Don't miss our summer sale!">
                    </div>
                    @error('subject')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Sender Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="from_name" class="block text-sm font-medium text-gray-700">From Name <span class="text-red-600">*</span></label>
                        <div class="mt-1">
                            <input type="text" name="from_name" id="from_name" value="{{ old('from_name', $campaign->from_name) }}" required class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="AlgoMine Team">
                        </div>
                        @error('from_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="from_email" class="block text-sm font-medium text-gray-700">From Email <span class="text-red-600">*</span></label>
                        <div class="mt-1">
                            <input type="email" name="from_email" id="from_email" value="{{ old('from_email', $campaign->from_email) }}" required class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="marketing@algomine.com">
                        </div>
                        @error('from_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Reply-To Email -->
                <div>
                    <label for="reply_to" class="block text-sm font-medium text-gray-700">Reply-To Email</label>
                    <div class="mt-1">
                        <input type="email" name="reply_to" id="reply_to" value="{{ old('reply_to', $campaign->reply_to) }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="support@algomine.com">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Leave empty to use the From Email as Reply-To</p>
                    @error('reply_to')
                        <p class="mt-1 text-sm text-red-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">Email Content</h3>
            </div>
            <div class="p-6 space-y-6">
                <!-- Email Content -->
                <div>
                    <label for="content" class="block text-sm font-medium text-gray-700">Email Content <span class="text-red-600">*</span></label>
                    <div class="mt-1">
                        <textarea id="content" name="content" rows="15" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Enter your email content here...">{{ old('content', $campaign->content) }}</textarea>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">You can use HTML tags for formatting</p>
                    @error('content')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Plain Text Version -->
                <div>
                    <label for="plain_text" class="block text-sm font-medium text-gray-700">Plain Text Version</label>
                    <div class="mt-1">
                        <textarea id="plain_text" name="plain_text" rows="5" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Enter a plain text version of your email...">{{ old('plain_text', $campaign->plain_text) }}</textarea>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Optional plain text version for email clients that don't support HTML</p>
                    @error('plain_text')
                        <p class="mt-1 text-sm text-red-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">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 Recipient Lists <span class="text-red-600">*</span></label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach($recipientLists as $list)
                            <div class="relative flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="list_{{ $list->id }}" name="recipient_lists[]" type="checkbox" value="{{ $list->id }}" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300 rounded" {{ in_array($list->id, old('recipient_lists', $campaignLists)) ? 'checked' : '' }}>
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="list_{{ $list->id }}" class="font-medium text-gray-700">{{ $list->name }}</label>
                                    <p class="text-gray-500">{{ $list->subscribers_count }} subscribers</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @error('recipient_lists')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Test Email -->
                <div>
                    <label for="test_email" class="block text-sm font-medium text-gray-700">Test Email Address</label>
                    <div class="mt-1">
                        <input type="email" name="test_email" id="test_email" value="{{ old('test_email') }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="test@example.com">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Send a test email to this address before sending to all recipients</p>
                    @error('test_email')
                        <p class="mt-1 text-sm text-red-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">
                <!-- Send Options -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">When to send this campaign?</label>
                    <div class="space-y-4">
                        <div class="relative flex items-start">
                            <div class="flex items-center h-5">
                                <input id="send_now" name="send_option" type="radio" value="now" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300" {{ old('send_option', $sendOption) == 'now' ? 'checked' : '' }}>
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="send_now" class="font-medium text-gray-700">Send immediately</label>
                                <p class="text-gray-500">The campaign will be sent as soon as you submit this form</p>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex items-center h-5">
                                <input id="send_later" name="send_option" type="radio" value="later" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300" {{ old('send_option', $sendOption) == 'later' ? 'checked' : '' }}>
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="send_later" class="font-medium text-gray-700">Schedule for later</label>
                                <p class="text-gray-500">Choose a specific date and time to send this campaign</p>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex items-center h-5">
                                <input id="save_draft" name="send_option" type="radio" value="draft" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300" {{ old('send_option', $sendOption) == 'draft' ? 'checked' : '' }}>
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="save_draft" class="font-medium text-gray-700">Save as draft</label>
                                <p class="text-gray-500">Save this campaign as a draft to send later</p>
                            </div>
                        </div>
                    </div>
                    @error('send_option')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Schedule Date/Time -->
                <div id="schedule_datetime_container" class="{{ $sendOption == 'later' ? '' : 'hidden' }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="scheduled_date" class="block text-sm font-medium text-gray-700">Date</label>
                            <div class="mt-1">
                                <input type="date" name="scheduled_date" id="scheduled_date" value="{{ old('scheduled_date', $scheduledDate) }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            @error('scheduled_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="scheduled_time" class="block text-sm font-medium text-gray-700">Time</label>
                            <div class="mt-1">
                                <input type="time" name="scheduled_time" id="scheduled_time" value="{{ old('scheduled_time', $scheduledTime) }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            @error('scheduled_time')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </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">Tracking Options</h3>
            </div>
            <div class="p-6 space-y-6">
                <!-- Tracking Options -->
                <div class="space-y-4">
                    <div class="relative flex items-start">
                        <div class="flex items-center h-5">
                            <input id="track_opens" name="track_opens" type="checkbox" value="1" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300 rounded" {{ old('track_opens', $campaign->track_opens) ? 'checked' : '' }}>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="track_opens" class="font-medium text-gray-700">Track Opens</label>
                            <p class="text-gray-500">Track when recipients open your email</p>
                        </div>
                    </div>
                    <div class="relative flex items-start">
                        <div class="flex items-center h-5">
                            <input id="track_clicks" name="track_clicks" type="checkbox" value="1" class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300 rounded" {{ old('track_clicks', $campaign->track_clicks) ? 'checked' : '' }}>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="track_clicks" class="font-medium text-gray-700">Track Clicks</label>
                            <p class="text-gray-500">Track when recipients click links in your email</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end space-x-3">
            <a href="{{ route('admin.email-campaigns.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                Cancel
            </a>
            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md 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">
                Update 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');
        
        function toggleScheduleDateTime() {
            if (sendLaterRadio.checked) {
                scheduleDatetimeContainer.classList.remove('hidden');
            } else {
                scheduleDatetimeContainer.classList.add('hidden');
            }
        }
        
        // Initial state
        toggleScheduleDateTime();
        
        // Add event listeners to all radio buttons
        document.querySelectorAll('input[name="send_option"]').forEach(function(radio) {
            radio.addEventListener('change', toggleScheduleDateTime);
        });
    });
</script>
@endpush
@endsection