@extends('layouts.admin')

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

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('admin.dashboard') }}" class="text-gray-700 hover:text-rose-600 text-sm font-medium">
                        <i class="fas fa-home mr-2"></i>
                        Dashboard
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-sm"></i>
                        <a href="{{ route('admin.email-campaigns.index') }}" class="text-gray-700 hover:text-rose-600 text-sm font-medium">
                            Email Campaigns
                        </a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-sm"></i>
                        <span class="text-gray-500 text-sm font-medium">
                            Create New Campaign
                        </span>
                    </div>
                </li>
            </ol>
        </nav>
        
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Create New Email Campaign</h3>
                <p class="mt-1 text-sm text-gray-500">Fill in the details to create your email campaign.</p>
            </div>
            
            <form action="{{ route('admin.email-campaigns.store') }}" method="POST" id="campaignForm">
                @csrf
                
                <div class="p-6 space-y-6">
                    <!-- Display validation errors -->
                    @if ($errors->any())
                        <div class="bg-red-50 p-4 mb-4">
                            <div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</div>
                            <ul class="mt-3 list-disc list-inside text-sm text-red-600">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    
                    <!-- Campaign Details -->
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-3">Campaign Details</h4>
                            
                            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                                <div class="sm:col-span-4">
                                    <label for="name" class="block text-sm font-medium text-gray-700">Campaign Name</label>
                                    <div class="mt-1">
                                        <input type="text" name="name" id="name" value="{{ old('name') }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" required>
                                        <p class="mt-1 text-xs text-gray-500">Internal name for this campaign (not visible to recipients)</p>
                                    </div>
                                </div>
                                
                                <div class="sm:col-span-6">
                                    <label for="subject" class="block text-sm font-medium text-gray-700">Email Subject</label>
                                    <div class="mt-1">
                                        <input type="text" name="subject" id="subject" value="{{ old('subject') }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Sender Information -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-3">Sender Information</h4>
                            
                            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                                <div class="sm:col-span-3">
                                    <label for="from_name" class="block text-sm font-medium text-gray-700">From Name</label>
                                    <div class="mt-1">
                                        <input type="text" name="from_name" id="from_name" value="{{ old('from_name', config('mail.from.name')) }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                </div>
                                
                                <div class="sm:col-span-3">
                                    <label for="from_email" class="block text-sm font-medium text-gray-700">From Email</label>
                                    <div class="mt-1">
                                        <input type="email" name="from_email" id="from_email" value="{{ old('from_email', config('mail.from.address')) }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                </div>
                                
                                <div class="sm:col-span-3">
                                    <label for="reply_to" class="block text-sm font-medium text-gray-700">Reply-To Email (Optional)</label>
                                    <div class="mt-1">
                                        <input type="email" name="reply_to" id="reply_to" value="{{ old('reply_to') }}" class="shadow-sm focus:ring-rose-500 focus:border-rose-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Email Content -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-3">Email Content</h4>
                            
                            <div>
                                <label for="content" class="block text-sm font-medium text-gray-700">Content</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">{{ old('content') }}</textarea>
                                    <p class="mt-1 text-xs text-gray-500">HTML content is supported. You can use variables like {first_name}, {company_name}, etc.</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Scheduling -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-3">Scheduling</h4>
                            
                            <div class="space-y-4">
                                <div>
                                    <div class="flex items-center">
                                        <input id="send_now" name="scheduling" type="radio" value="now" {{ old('scheduling') == 'now' ? 'checked' : '' }} class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300">
                                        <label for="send_now" class="ml-2 block text-sm text-gray-700">
                                            Send immediately after creation
                                        </label>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex items-center">
                                        <input id="send_later" name="scheduling" type="radio" value="later" {{ old('scheduling') == 'later' ? 'checked' : '' }} class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300" checked>
                                        <label for="send_later" class="ml-2 block text-sm text-gray-700">
                                            Schedule for later
                                        </label>
                                    </div>
                                    
                                    <div class="mt-3 ml-6" id="schedulingFields">
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <label for="scheduled_date" class="block text-sm font-medium text-gray-700">Date</label>
                                                <input type="date" name="scheduled_date" id="scheduled_date" value="{{ old('scheduled_date', date('Y-m-d', strtotime('+1 day'))) }}" class="mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                            </div>
                                            <div>
                                                <label for="scheduled_time" class="block text-sm font-medium text-gray-700">Time</label>
                                                <input type="time" name="scheduled_time" id="scheduled_time" value="{{ old('scheduled_time', '09:00') }}" class="mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex items-center">
                                        <input id="save_draft" name="scheduling" type="radio" value="draft" {{ old('scheduling', 'draft') == 'draft' ? 'checked' : '' }} class="focus:ring-rose-500 h-4 w-4 text-rose-600 border-gray-300">
                                        <label for="save_draft" class="ml-2 block text-sm text-gray-700">
                                            Save as draft
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 border-t border-gray-200">
                    <a href="{{ route('admin.email-campaigns.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 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 justify-center ml-3 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                        Create Campaign
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Load WYSIWYG editor if available
        if (typeof tinymce !== 'undefined') {
            tinymce.init({
                selector: '#content',
                plugins: 'link code table lists image',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link image',
                height: 400
            });
        }
        
        // Handle scheduling options
        const sendNow = document.getElementById('send_now');
        const sendLater = document.getElementById('send_later');
        const saveDraft = document.getElementById('save_draft');
        const schedulingFields = document.getElementById('schedulingFields');
        
        function updateSchedulingFields() {
            schedulingFields.style.display = sendLater.checked ? 'block' : 'none';
        }
        
        sendNow.addEventListener('change', updateSchedulingFields);
        sendLater.addEventListener('change', updateSchedulingFields);
        saveDraft.addEventListener('change', updateSchedulingFields);
        
        updateSchedulingFields();
    });
</script>
@endpush