@extends('admin.layouts.master')

@section('title', __('Send Custom Mail'))

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{ __('Send Custom Mail') }}</h3>
                    <div class="nk-block-des text-soft">
                        <p>{{ __('Compose and send an email to one or more users using the site template.') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-block">
            <div class="card card-bordered">
                <div class="card-inner">
                    <form action="{{ route('admin.users.send.email') }}" method="POST" class="form-validate is-alter" id="custom-mail-form">
                        @csrf
                        <input type="hidden" name="custom_mail" value="1">
                        <div class="row gy-4">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="send_to">{{ __('Recipients') }} <span class="text-danger">*</span></label>
                                    <div class="form-control-wrap">
                                        <select name="send_to[]" id="send_to" class="form-select" multiple="multiple" required data-placeholder="{{ __('Select one or more users') }}">
                                            @foreach($users as $u)
                                                <option value="{{ $u->id }}">{{ $u->name }} &lt;{{ $u->email }}&gt;</option>
                                            @endforeach
                                        </select>
                                        <div class="form-note">{{ __('Hold Ctrl/Cmd to select multiple users.') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="email-subject">{{ __('Email Subject') }} <span class="text-danger">*</span></label>
                                    <div class="form-control-wrap">
                                        <input type="text" name="subject" class="form-control form-control-lg" id="email-subject" placeholder="{{ __('Subject') }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="message">{{ __('Message') }} <span class="text-danger">*</span></label>
                                    <div class="form-control-wrap">
                                        <textarea name="message" id="message" class="form-control tinymce-editor" placeholder="{{ __('Hello User,') }}" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <button type="submit" class="btn btn-lg btn-primary" id="custom-mail-submit">
                                            <span class="btn-text">{{ __('Send Email') }}</span>
                                            <span class="spinner-border spinner-border-sm hide" role="status" aria-hidden="true"></span>
                                        </button>
                                    </li>
                                    <li>
                                        <a href="{{ route('admin.users') }}" class="link link-light">{{ __('Cancel') }}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="{{ asset('assets/css/editors/tinymce.css') }}">
    <script src="{{ asset('assets/js/libs/tinymce.js') }}"></script>
    <script type="text/javascript">
        !(function (NioApp, $) {
            var _editor = '.tinymce-editor';
            NioApp.Tinymce = function () {
                if ($(_editor).exists()) {
                    tinymce.init({
                        selector: _editor,
                        content_css: true,
                        skin: false,
                        branding: false,
                        menubar: false,
                        height: 350,
                        plugins: ['lists table link code'],
                        toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link | code removeformat',
                        setup: function (editor) {
                            editor.on('change', function () { editor.save(); });
                        }
                    });
                }
            };
            NioApp.coms.docReady.push(NioApp.Tinymce);
        })(NioApp, jQuery);

        $(document).ready(function() {
            $('#custom-mail-form').on('submit', function(e) {
                if (typeof tinymce !== 'undefined' && tinymce.get('message')) {
                    tinymce.get('message').save();
                }
                var $form = $(this);
                var $btn = $('#custom-mail-submit');
                var recipients = $('#send_to').val();
                if (!recipients || recipients.length === 0) {
                    e.preventDefault();
                    NioApp.Toast('{{ __("Please select at least one recipient.") }}', 'error');
                    return;
                }
                $btn.prop('disabled', true).find('.btn-text').addClass('hide');
                $btn.find('.spinner-border').removeClass('hide');
                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: $form.serialize(),
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    success: function(res) {
                        NioApp.Toast(res.msg || '{{ __("Your message has been sent successfully.") }}', 'success');
                        $form[0].reset();
                        if (tinymce.get('message')) tinymce.get('message').setContent('');
                        $('#send_to').val(null).trigger('change');
                    },
                    error: function(xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.invalid) ? xhr.responseJSON.errors.invalid[0] : '{{ __("Sorry, we are unable to send email.") }}';
                        NioApp.Toast(msg, 'error');
                    },
                    complete: function() {
                        $btn.prop('disabled', false).find('.btn-text').removeClass('hide');
                        $btn.find('.spinner-border').addClass('hide');
                    }
                });
                e.preventDefault();
            });
        });
    </script>
@endpush