@extends('layouts.app')

@push('head-script')
    <link rel="stylesheet" href="//cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
@endpush

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method='POST' action='{{url('admin/communication/mail/send')}}' id='sendmail' class='row'>
                        @csrf
                        <div class='col-sm-12 form-group mb-2'>
                            <label><b>Select Recipients</b></label>
                            <select class='form-control' name='recipients[]' id='recipients' multiple>
                            </select>
                        </div>
                        <div class='col-sm-12 form-group mb-2'>
                            <label><b>Select Categories</b></label>
                            <select class='form-control' name='categories[]' id='categories' multiple>
                                
                            </select>
                        </div>
                        <div class='col-sm-12 form-group mb-2'>
                            <label><b>Subject</b></label>
                            <input type='text' name='subject' class='form-control' placeholder='Enter subject here'>
                        </div>
                        <div class='col-sm-12 form-group mb-2'>
                            <label><b>Message</b></label>
                            <textarea name='message' class='form-control' id='summernote' placeholder='Enter message here'></textarea>
                        </div>
                        <div class='col-sm-12 form-group mb-2'>
                            <button class='btn btn-primary'> Send Email</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="//cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    <script src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
    <script src="{{ asset('assets/node_modules/select2/dist/js/select2.full.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/node_modules/bootstrap-select/bootstrap-select.min.js') }}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <script>
    $(document).ready(function(){
        $('#recipients').select2({
            width: '100%',
            placeholder: 'Select Recipients',
            //dropdownParent: $('#levelModal'),
            allowClear: true,
            ajax: {
                url: '{{url("admin/search/users")}}',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
        $('#categories').select2({
            width: '100%',
            placeholder: 'Select Categories',
            //dropdownParent: $('#levelModal'),
            allowClear: true,
            ajax: {
                url: '{{url("admin/search/categories")}}',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
        
        $('#summernote').summernote({
            height: 200,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize', 'undo', 'redo']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['table']],
                ['search', ['findnreplace', 'changecolor']]
            ],
        });

        $('#sendmail').submit(function(e){
            e.preventDefault();
            $.easyAjax({
                url: '{{url('admin/communication/mail/send')}}',
                container: '#sendmail',
                type: "POST",
                redirect: true,
                data: $('#sendmail').serialize(),
                success: function (response) {
                    //alert('OK');
                },
                error: function(response){
                    $.toast({
                        heading: 'Error',
                        text: 'Something went wrong! Could not send email',
                        showHideTransition: 'fade',
                        icon: 'error'
                    });
                }
            });
        });
    });
    </script>
@endpush