<x-app-layout>
<x-module-hero title="Compose Newsletter" description="Create rich HTML emails and send to subscribers" icon="fa-paper-plane">
    <x-slot name="backButton">
        <a href="{{ route('email-subscribers.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Subscribers
        </a>
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-300 text-green-800 rounded">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-300 text-red-800 rounded">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('email-subscribers.send') }}" onsubmit="syncEditor()">
        @csrf
        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Subject</label>
            <input type="text" name="subject" value="{{ old('subject') }}" class="w-full px-3 py-2 border rounded" required>
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Body</label>
            <div id="quill-editor" class="min-h-[250px] bg-white border rounded"></div>
            <textarea name="body" id="body" class="hidden">{{ old('body') }}</textarea>
        </div>

        <div class="mb-4 bg-white p-4 rounded border">
            <label class="block text-sm font-medium mb-2">Recipients</label>
            <div class="mb-2">
                <label class="inline-flex items-center"><input type="checkbox" id="select-all" class="mr-2"> Select all visible</label>
                <label class="inline-flex items-center ml-4"><input type="checkbox" name="send_to_all" value="1"> Send to all active confirmed subscribers</label>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 max-h-56 overflow-auto">
                @foreach($subscribers as $s)
                    <label class="flex items-center gap-2 p-2 border rounded">
                        <input type="checkbox" name="recipient_ids[]" value="{{ $s->id }}" class="recipient-checkbox">
                        <div class="text-sm">{{ $s->email }} @if($s->name) — <span class="text-gray-500">{{ $s->name }}</span>@endif</div>
                    </label>
                @endforeach
            </div>
        </div>

        <div>
            <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white rounded">Send Newsletter</button>
        </div>
    </form>
</div>

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script>
    const quill = new Quill('#quill-editor', { theme: 'snow' });
    function syncEditor(){
        document.getElementById('body').value = quill.root.innerHTML;
    }
    document.getElementById('select-all').addEventListener('change', function(e){
        document.querySelectorAll('.recipient-checkbox').forEach(cb => cb.checked = e.target.checked);
    });
</script>
@endpush

</x-app-layout>
