@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Send Newsletter')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
@endpush

@section('content')
    <div class="bg-white rounded-lg shadow">
        <div class="p-6">

            <h3 class="text-xl font-semibold mb-4">Send mail to Subscriber</h3>

            <form action="{{ route('admin.send-newsletter-store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="input-with-label mb-6">
                    <label for="subscriber_ids" class="block text-sm font-medium text-gray-700 mb-2">Select Subscriber (Leave empty for all
                        subscribers)</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('subscriber_ids') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror" id="subscriber_ids"
                        name="subscriber_ids[]" multiple>
                        @foreach ($activeSubscribers as $subscriber)
                            <option value="{{ $subscriber->id }}"
                                {{ is_array(old('subscriber_ids')) && in_array($subscriber->id, old('subscriber_ids')) ? 'selected' : '' }}>
                                {{ $subscriber->email }}
                            </option>
                        @endforeach
                    </select>
                    @error('subscriber_ids')
                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-6">
                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subject Name <span class="text-red-600">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('subject') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror" id="subject"
                        name="subject" value="{{ old('subject') }}" required>
                    @error('subject')
                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Message <span class="text-red-600">*</span></label>
                    <textarea class="rich-editor" name="description">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="flex justify-end gap-2">
                    <a href="{{ route('admin.subscribers.list') }}" class="btn btn-secondary">Subscriber List</a>
                    <button type="submit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('common/tinymce/js/tinymce/tinymce.min.js') }}"></script>

    <script>
        (function($) {
            "use strict"

            $(document).ready(function() {

                // Initialize Select2
                $('#subscriber_ids').select2({
                    theme: 'bootstrap-5',
                    allowClear: true,
                    multiple: true,
                    placeholder: "Select subscribers (leave empty for all)"
                });

                tinymce.init({
                    selector: '.rich-editor',
                    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                    tinycomments_mode: 'embedded',
                    tinycomments_author: 'Author name',
                    mergetags_list: [{
                            value: 'First.Name',
                            title: 'First Name'
                        },
                        {
                            value: 'Email',
                            title: 'Email'
                        },
                    ]
                });
            });
        })(jQuery);
    </script>
@endpush