@extends('base')
@section('content')

    <h1 class="mt-5">Questions</h1>
    <div class="graph-card px-4 py-3 my-3" style="max-width: 100%;">
        @if(session()->has('success'))
            <div class="alert alert-success flashmsg">
                {{ session()->get('success') }}
            </div>
        @endif
        <h2 class="d-inline-block" style="color: #727E88;">Add Question</h2>
        <div class="d-inline-block float-end">
            <img src="{{secure_asset('images/flag.svg')}}" alt="...">
        </div>
        <form class="my-3" method="POST" action="{{ secure_url('store-question') }}" enctype="multipart/form-data">
            {{ csrf_field() }}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <label>Question:</label>
            <input type="text" name="questions" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="TextInput" style="max-width: 100%;">

            <input type="text" name="tag_input" id="tag_input" hidden>
            <div id="appendTo" style="display: inline;"></div>
            <br>
            <label>Tags:</label>
            <select name="search" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="search-input">
                @foreach($getTag as $getTags)
                    <option value="{{ $getTags->id }}" id="{{ $getTags->name }}" >{{ $getTags->name }}</option>
                @endforeach
            </select>

            <br>
            <label>Company:</label>
            <select name="company_id" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="search-input">
                @foreach($getCompany as $getCompanies)
                    <option value="{{ $getCompanies->id }}" id="{{ $getCompanies->name }}" >{{ $getCompanies->name }}</option>
                @endforeach
            </select>

            <label>Explain:</label>
            <textarea name="explain" class="form-control px-3 py-2 audit-name mb-3 tinymce-editor"></textarea>

            <div class="text-end">
                <button type="submit" class="btn btn-primary vl-btn-small">Save & Exit</button>
            </div>
        </form>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <script src="https://cdn.tiny.cloud/1/f0ldnesmdkmyl0dn2689v4dtetn0nenv2dylcl3dlyzkzta8/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script type="text/javascript">
        var route = "{{ url('autocomplete-search') }}";
        $('#search-input').typeahead({
            source: function (query, process) {
                return $.get(route, {
                    query: query
                }, function (data) {
                    return process(data);
                });
            }
        });


        $('#search-input').change(function(){
            var getValue  = $('#search-input').val();
            var getName   = $('#search-input option:selected').attr('id');
            arr.push(getValue);
            $('#tag_input').val(JSON.stringify(arr));
            $( "#appendTo" ).append('<span class="badge bg-dark mx-2">'+getName+'</span>');
            count++;
        });

        tinymce.init({
            selector: 'textarea.tinymce-editor',
            automatic_uploads: true,
            image_class_list: [
                {title: 'upload-image', value: 'upload-image'},
            ],
            height: 500,
            setup: function (editor) {
                editor.on('init change', function () {
                    editor.save();
                });
            },
            image_dimensions: false,

            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste imagetools"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",

            image_title: true,
            automatic_uploads: true,
            images_upload_url: '/upload-image',
            file_picker_types: 'image',
            image_max_dimensions: {
                width: "100%",
                height: "auto",
            },
            file_picker_callback: function(cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function() {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                };
                input.click();
            }
        });

        setTimeout(function() {
            $('.flashmsg').fadeOut(1500);
        }, 3000);

    </script>

@endsection