@extends('frontend.layouts.app')
@push('after-scripts')
    @push('after-scripts')
        <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
        <script src="{{ asset('js/tinymce/jquery.tinymce.min.js') }}"></script>
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <script src="https://unpkg.com/tippy.js@6"></script>
        <script type="text/javascript">

            $(document).ready(() => {
                $('.select2').select2({
                    placeholder: 'Search by user name',
                    minimumInputLength: 1,
                    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper

                        url: "{!! URL::to('')!!}/searchprofileforselect2",
                        dataType: 'json',
                        quietMillis: 150,
                        data: function (term) {
                            return {
                                q: term, // search term
                            };
                        },
                        cache: true
                    },
                });
                //tinymce
                tinymce.init({
                    selector: '.richtext',
                    menubar: false,
                    relative_urls: false,
                    remove_script_host: true,
                    document_base_url: "{{url('/')}}",
                    valid_elements: 'img[class=myclass|!src|border:0|alt|title|width|height|style],' +
                        'a[href|target=_blank],' +
                        'strong/b,div[align],strong/b,em/i,strike,u,' +
                        'p[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|title],' +
                        'ol[class|compact<compact|dir<ltr?rtl|id|lang|start|style|title|type],' +
                        'ul[class|compact<compact|dir<ltr?rtl|id|lang|start|style|title|type],',

                    plugins: [
                        "link image emoticons"
                    ],
                    mobile: {
                        theme: 'mobile',
                        plugins: ["link image emoticons"],
                        toolbar: ['bold', 'italic', 'link', 'image', 'emoticons']
                    },
                    contextmenu: 'link, image',
                    toolbar: 'bold italic | link image emoticons |',
                    file_picker_types: 'image',
                    paste_data_images: true,
                    images_upload_handler: function (blobInfo, success, failure) {
                        let data = new FormData();
                        data.append('uploaded_file', blobInfo.blob(), blobInfo.filename());
                        console.log('Uploading data')
                        axios.post('{{route('frontend.messages.storemedia')}}', data)
                            .then(function (res) {
                                console.log('Uploading success!')
                                //  console.log(res.data)
                                success(res.data.location);
                            })
                            .catch(function (err) {
                                failure('HTTP Error: ' + err.message);
                            });
                    },
                });
            });


            // populates a form with data returned from Laravel
            const populate = (frm, data) => {

                $.each(data, (key, value) => {
                    let $ctrl = $('[name=' + key + ']', frm);
                    if ($ctrl.is("select")) {
                        $ctrl.select2('val', value);
                    } else if ($ctrl.is("textarea")) {
                        if ($ctrl.hasClass('richtext')) {
                            tinyMCE.activeEditor.setContent(value);
                        } else {
                            $ctrl.val((value === null) ? '' : value);
                        }
                    } else {

                        switch ($ctrl.attr("type")) {
                            case "text" :
                            case "hidden":
                                $ctrl.val(value);
                                $ctrl.trigger('change');
                                break;

                            case "radio" :
                            case "checkbox":
                                $ctrl.each(function () {
                                    if ($(this).attr('value') == value) {
                                        $(this).attr("checked", value);
                                    }
                                });
                                break;

                            default:
                                $ctrl.val(value);
                        }

                    }
                });
            }

        </script>
    @endpush
@section('content')
    {!! Breadcrumbs::render('frontend.messages.create') !!}
    <form action="{{ route('frontend.messages.store') }}" method="post">
        {{ csrf_field() }}
        <div class="form-group row">
            <div class="col-sm-12">
                {{ html()->label('To')->for('recipient') }}
                {{--        <label for="title">Title</label>--}}
            </div>
            <div class="col-sm-12">

                <select class="select2" name="recipient" required style="width: 300px">
                    <option value="-1"></option>
                </select>
            </div>
            <div class="col-sm-12">
                {{ html()->label('Subject')->for('title') }}
                {{--        <label for="title">Title</label>--}}
            </div>
            <div class="col-sm-12">
                {{ html()->text('title')
               ->class('form-control')
               ->placeholder('Subject')
               ->attribute('maxlength', 191)
               ->required()}}
                {{--        <input type="text" name="title" class="form-control" style="width: 100%" placeholder="Title"></input>--}}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
                {{ html()->label('Body')->for('body') }}
                {{--        <label for="title">Body</label>--}}
            </div>
            <div class="col-sm-12">
                {{ html()->textarea('body')
             ->class('form-control richtext')
             ->id('new_thread_textarea')
             ->style('width: 100%')
             ->placeholder('Body')}}
                {{--        <textarea name="body" class="form-control" id="new_thread_textarea" style="width: 100%" placeholder="Body"></textarea>--}}
            </div>
        </div>


        <div class="form-group">
            {!! Form::button('<i class="far fa-save" aria-hidden="true"></i> Send', ['type' => 'submit', 'class'=>'btn btn-primary form-control']) !!}
        </div>
    </form>

    {{--    <form action="{{ route('frontend.messages.store') }}" method="post">--}}
    {{--        {{ csrf_field() }}--}}
    {{--        <div class="col-md-6">--}}
    {{--            <!-- Subject Form Input -->--}}
    {{--            <div class="form-group">--}}
    {{--                <label class="control-label">Subject</label>--}}
    {{--                <input type="text" class="form-control" name="subject" placeholder="Subject"--}}
    {{--                       value="{{ old('subject') }}">--}}
    {{--            </div>--}}

    {{--            <!-- Message Form Input -->--}}
    {{--            <div class="form-group">--}}
    {{--                <label class="control-label">Message</label>--}}
    {{--                <textarea name="message" class="form-control">{{ old('message') }}</textarea>--}}
    {{--            </div>--}}

    {{--            @if($users->count() > 0)--}}
    {{--                <div class="checkbox">--}}
    {{--                    @foreach($users as $user)--}}
    {{--                        <label title="{{ $user->name }}"><input type="checkbox" name="recipients[]"--}}
    {{--                                                                value="{{ $user->id }}">{!!$user->name!!}</label>--}}
    {{--                    @endforeach--}}
    {{--                </div>--}}
    {{--            @endif--}}

    {{--            <!-- Submit Form Input -->--}}
    {{--            <div class="form-group">--}}
    {{--                <button type="submit" class="btn btn-primary form-control">Submit</button>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </form>--}}
@stop