new_raffles/Modules/Template/resources/views/template/modal/attachment.blade.php

<div class="modal fade" id="attachmentModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="emailModalLabel">Send Mail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                {{ html()->form('POST')->class(['needs-validation sendMailForm'])->attributes(['novalidate'])->open() }}

                <div class="card card-body bg-white">
                    <div class="row g-3">

                        <div class="col-lg-12">
                            {{ html()->label('To:')->class('form-label') }}
                            {{ html()->span('*')->class('text-danger') }}
                            {{ html()->email('email')->class('form-control')->placeholder("Enter Receipent's Email")->required() }}
                            {{ html()->div('Enter Valid Email Address')->class('invalid-feedback') }}
                        </div>

                        <div class="col-lg-12">
                            {{ html()->label('Select Template')->class('form-label') }}
                            {{ html()->span('*')->class('text-danger') }}
                            {{ html()->select('template', $templateOptions)->class('form-select change-template')->placeholder('Select Template')->attributes(['data-type' => 'email'])->required() }}
                        </div>

                        <div class="col-lg-12">
                            {{ html()->label('Subject')->class('form-label') }}
                            {{ html()->span('*')->class('text-danger') }}
                            {{ html()->text('subject')->class('form-control subject')->required() }}
                            {{ html()->div('Subject is required!')->class('invalid-feedback') }}
                        </div>

                        <div class="col-lg-12">
                            {{ html()->label('Message')->class('form-label') }}
                            {{ html()->span('*')->class('text-danger') }}
                            {{ html()->textarea('message')->class('form-control message ckeditor-classic')->id('attachment-editor')->required() }}
                        </div>

                        <div class="col-lg-12">
                            {{ html()->label('Attachments')->class('form-label') }}
                            <div class="document-list">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="hstack justify-content-end mt-2 gap-2">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Send</button>
                </div>

                {{ html()->form()->close() }}

            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        $('body').on('change', '.change-template', function() {
            id = $(this).val();
            that = $(this)

            if (id == '') {
                toastr.error('Choose Template First');
                return false;
            }

            $.ajax({
                type: "GET",
                url: '{{ route('template.findByAjax') }}',
                data: {
                    id: id,
                },
                success: function(res) {
                    result = res.data;
                    if (result.status) {
                        that.parents('.card').find('.subject').val(result.subject);

                        let messageFieldId = that.parents('.card').find('.message').attr('id');
                        let editor = CKEDITOR.instances[messageFieldId];
                        if (editor) {
                            let currentContent = editor.getData();
                            editor.setData(result.message);
                        }

                    }
                },
            });
        })

        $(document).on('submit', '.sendMailForm', function(event) {
            event.preventDefault();
            const url = $(this).attr('action');
            const method = $(this).attr('method');
            let form = $(this);
            let formData = new FormData(form[0]);

            let myModalEl = $(this).closest('.modal').attr('id');
            var emailModal = bootstrap.Modal.getOrCreateInstance($('#' + myModalEl))
            const button = $(this).find('button[type="submit"]');

            $.ajax({
                url: url,
                type: method,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content'),
                },
                beforeSend: () => {
                    button.text('Sending...');
                    button.prop('disabled', true);
                },
                success: function(response) {
                    if (response.status == true) {
                        emailModal.hide()

                        button.text('Send');
                        button.prop('disabled', false);

                        let messageFieldId = form.find('.message').attr('id');
                        let editor = CKEDITOR.instances[messageFieldId];

                        if (editor) {
                            editor.setData('');
                        }

                        form[0].reset();
                        toastr.success(response.msg);

                    }

                    $('#student-table').DataTable().ajax.reload();
                    var statusModal = bootstrap.Modal.getInstance($('#bulkStatusModal'));
                    statusModal.hide();


                },

                error: function(xhr) {
                    if (xhr.status == 422) {
                        let errors = xhr.responseJSON.errors;
                        $('.error-message').remove();
                        $.each(errors, function(key, value) {
                            let errorMessage = $(
                                    '<span class="error-message text-danger mt-2"></span>'
                                )
                                .text(
                                    value[0]);
                            $('#' + key).after(errorMessage);
                        });
                    } else {
                        console.log(xhr);
                    }
                },
                complete: () => {
                    button.text('Save');
                    button.prop('disabled', false);
                }
            })
        })
    </script>
@endpush